<template>
  <div class="stage">
    <div class="header1">
      <div class="header1-box">
        <el-icon color="#fff" size="24"><UserFilled /></el-icon>
        <span>{{ loginList.account }}</span>
      </div>
      <div class="header1-btn" @click="onLogin">
        <el-icon><ArrowUpBold /></el-icon>
      </div>
    </div>
    <div class="header2">
      <div class="header2-box1">UCIMS</div>
      <div class="header2-box2">
        <ul class="header2-box2-ul">
          <li><a @click="scrollToSection('section1')">主页</a></li>
          <li><a @click="scrollToSection('section2')">社团简介</a></li>
          <li><a @click="scrollToSection('section3')">社团活动</a></li>
          <li><a @click="scrollToSection('section4')">成为成员</a></li>
          <li><a @click="scrollToSection('section5')">获取申请表</a></li>
          <li><a @click="scrollToSection('section6')">社团新闻</a></li>
          <!-- <li><a href="#section2">社团简介</a></li>
          <li><a href="#section3">社团活动</a></li>
          <li><a href="#section4">成为成员</a></li>
          <li><a href="#section5">获取申请表</a></li>
          <li><a href="#section6">社团新闻</a></li> -->
        </ul>
      </div>
    </div>
    <div class="banner">
      <img
        src="https://img0.baidu.com/it/u=3870626841,752305343&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=500"
        alt=""
      />
    </div>
    <div class="home" id="section2" ref="section2">
      <div class="introduction">
        <img :src="stageData.introduction.logo" alt="图片出不来了" />
        <span>{{ stageData.introduction.name }}</span>
      </div>
      <div class="introductionContent">
        <p>{{ stageData.introduction.content }}</p>
      </div>
    </div>
    <div class="activity" id="section3" ref="section3">
      <div class="activityMain">
        <span class="activity-span">社团活动</span>
        <div class="activity-item" v-for="item in stageData.acitivity">
          <div v-for="i in item.imgs" class="activity-item-div">
            <img :src="i" alt="" class="activity-item-div-img" />
          </div>
        </div>
      </div>
    </div>
    <div class="joinClub" id="section4" ref="section4">
      <p>我要成为社团成员</p>
      <div id="login-form">
        姓名：<input type="text" v-model="memberList.mname" />
        性别：
        <div style="margin: 15px 0px">
          <input
            type="radio"
            style="marginleft: 50px"
            name="sex"
            value="M"
            v-model="memberList.msex"
          />
          男<input
            type="radio"
            style="marginleft: 50px"
            name="sex"
            value="F"
            v-model="memberList.msex"
          />女
        </div>
        <label for="username">学校:</label>
        <select
          type="text"
          id="school"
          name="school"
          v-model="memberList.mschoolname"
          required
        >
          <option value="河池学院">河池学院</option>
          <option value="南京工业大学">南京工业大学</option>
        </select>
        手机号：<input type="text" maxlength="11" v-model="memberList.mphone" />
        意向部门:<select>
          <option v-for="item in stageData.yixiang" :value="item.dname">
            {{ item.dname }}
          </option>
        </select>
        <button class="btn" @click="onSubmitJoin">提交</button>
      </div>
    </div>
    <div class="docx" id="section5" ref="section5">
      <div class="docxMain">
        获取报名表
        <p>新生社团招新通道</p>
        <!-- <button @click="onDownLoad">点击下载</button> -->
        <el-link :icon="Download" @click="onDownLoad">下载申请表</el-link>
      </div>
    </div>
    <div class="news" id="section6" ref="section6">
      <span>社团新闻</span>
      <div>
        <ul v-for="item in stageData.activityList">
          <li>
            <span>{{ item.starttime }}</span> <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer"></div>
  </div>
  <!-- 登录 -->
  <div>
    <div class="login-dialog" v-if="isDialogLogin">
      <div class="dialog-header">
        <h2 class="club-name">School Club</h2>
        <div class="tab-group">
          <el-link
            type="primary"
            @click="loginTab"
            v-if="cStatus === 1"
            style="marginLeft: 20px"
            >注册</el-link
          >
          <el-link
            type="primary"
            @click="registerTab"
            v-if="cStatus !== 1"
            style="marginLeft: 20px"
            >登录</el-link
          >
        </div>
        <button class="close-btn" @click="isDialogLogin = false">
          &times;
        </button>
      </div>
      <div class="dialog-body">
        <div id="login-form" method="POST" v-if="cStatus === 1">
          <label for="username">学校:</label>
          <select
            type="text"
            id="school"
            name="school"
            v-model="loginData.schoolname"
            required
          >
            <option value="">河池学院</option>
            <option value="">南京工业大学</option>
          </select>
          <label for="username">账号:</label>
          <input
            type="text"
            id="username"
            name="username"
            v-model="loginData.account"
            required
          />
          <label for="password">密码:</label>
          <input
            type="password"
            id="password"
            name="password"
            v-model="loginData.password"
            required
          />
          <button type="submit" class="login-btn" @click="onDenglu">
            登录
          </button>
        </div>
        <div id="login-form" method="POST" v-if="cStatus !== 1">
          <label for="username">学校:</label>
          <select
            type="text"
            id="school"
            name="school"
            v-model="loginData.schoolname"
            required
          >
            <option value="河池学院">河池学院</option>
            <option value="南京工业大学">南京工业大学</option>
          </select>
          <label for="new-username">账号</label>
          <input
            type="text"
            id="new-username"
            name="new-username"
            v-model="loginData.account"
            required
          />
          <label for="new-password">密码</label>
          <input
            type="password"
            id="new-password"
            name="new-password"
            required
            v-model="loginData.password"
          />
          <label for="confirm-password">确认密码</label>
          <input
            type="password"
            id="confirm-password"
            name="confirm-password"
            required
            v-model="password2"
          />
          <button class="login-btn" @click="onZhuce">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.stage {
  height: 100%;
  .header1 {
    position: relative;
    right: -1235px;
    top: 0px;
    z-index: 1000;
    display: flex;
    color: #fff;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 160px;
    background: rgb(36, 112, 182);
    .header1-box {
      margin-left: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        margin-left: 6px;
      }
    }
    .header1-btn {
      cursor: pointer;
      height: 100%;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      background: #004680;
    }
    .header1-btn:hover {
      background: #1a3160;
    }
  }
  .header2 {
    margin-left: 30px;
    margin-top: 45px;
    display: flex;
    align-content: center;
    z-index: 1000;
    .header2-box1 {
      font-size: 40px;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      color: #2753b3;
      letter-spacing: -1.5px;
      background: linear-gradient(to right, #1c47a3, #0d2861);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      // margin-right: 5px;
    }
    .header2-box2 {
      margin-left: 98px;
      width: 1000px;
      color: #fff;
      background: #252733;
      position: relative;
      .header2-box2-ul {
        margin-left: -30px;
        color: #fff;
        display: flex;
        align-content: center;
        justify-content: space-around;
        li {
          list-style: none;
          display: inline-block;
          width: 140px;
          text-align: center;
          cursor: pointer;
          a {
            text-decoration: none;
            color: white;
          }
        }
      }
    }
    .header2-box2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 6%;
      height: 100%;
      background-color: #252733;
      transform: skewX(-40deg);
      transform-origin: 100% 0;
    }
  }
  .banner {
    margin-top: 60px;
    height: 100px;
    width: 100%;
    position: relative;
    overflow: hidden;
    img {
      margin-top: -300px;
      width: 100%;
    }
  }
  .banner::before {
    content: "Information on college associations";
    position: absolute;
    line-height: 100px;
    font-size: 28px;
    color: #ffffff;
    margin-left: 80px;
  }
  .home {
    margin-top: 50px;
    margin-left: 200px;
    font-size: 14px;
    .introduction {
      display: flex;
      align-items: center;
      span {
        font-size: 16px;
      }
    }
    .introduction > img {
      width: 50px;
      height: 50px;
      margin-right: 30px;
      border-radius: 50%;
    }
    .introductionContent {
      width: 500px;
    }
    p {
      line-height: 30px;
      text-indent: 2em;
    }
  }
  .activity {
    margin-top: 45px;
    display: flex;
    flex-direction: row-reverse;
    // width: 00px;
    // height: 150px;
    .activity-span {
      // height: 50px;
      line-height: 50px;
      margin-left: 10px;
    }
    // overflow: hidden;
    .activityMain {
      height: 180px;
      display: flex;
      width: 750px;
      // margin-right: 100px;
      flex-direction: column;
      overflow-x: hidden;
    }
    .activity-item {
      // overflow-x: scroll;
      // position: relative;
      display: flex;
      // flex-direction: row;
      .activity-item-div {
        // width: 100%;
        // overflow-x: auto;
        // display: flex;
        // flex-direction: row;
        .activity-item-div-img {
          // display: flex;
        }
      }
      img {
        // display: flex;
        padding: 5px 10px;
        // width: 190px;
        height: 120px;
      }
    }
  }
  .joinClub {
    margin-top: 50px;
    margin-left: 200px;
    width: 800px;
    div {
      width: 300px;
      .btn {
        background-color: #004680;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
  .docx {
    margin-top: 60px;
    display: flex;
    flex-direction: row-reverse;
    margin-right: 455px;
    .docxMain {
    }
  }
  .news {
    margin-top: 50px;
    margin-left: 200px;
    li {
      line-height: 35px;
    }
  }
  .footer {
    padding-bottom: 50px;
  }
}
.login-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  // border: 2px solid rgb(36, 112, 182);
  // border-radius: 5px;
  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 30px;
  max-width: 400px;
  width: 100%;
  z-index: 9999;
}

.dialog-header {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.club-logo {
  height: 50px;
  margin-right: 10px;
}

.club-name {
  text-align: center;
  font-size: 1.5rem;
  color: #004680;
}

.close-btn {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #004680;
  margin-left: 50px;
  // margin-bottom: 50px;
}

.close-btn:hover {
  color: #c0392b;
}

.dialog-body {
  padding: 0 10px;
  margin-top: 25px;
}

#login-form {
  display: flex;
  flex-direction: column;
  padding: 0 25px;
  margin-bottom: 30px;
}

label {
  font-size: 1rem;
  margin-bottom: 5px;
}

input[type="text"],
select,
option,
input[type="password"] {
  padding: 10px;
  margin-bottom: 10px;
  // border-radius: 5px;
  border: none;
  outline: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.login-btn {
  background-color: #004680;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.login-btn:hover {
  background-color: #2c3e50;
}
</style>

<script setup>
import {
  UserFilled,
  ArrowUpBold,
  ArrowDownBold,
  Download,
  Edit,
} from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useHome } from "@/stores/home.js";
import { ElMessage } from "element-plus";
import { uInfo } from "@/stores/userinfo.js";
import { addMember } from "@/api/member.js";
import {
  zhuyeResgiter,
  zhuyeLogin,
  zhuyeData,
  zhuyeData1,
  zhuyeData2,
  zhuyeData3,
  zhuyeData4,
} from "@/api/home.js";
import { updateDownloads } from "@/api/downloads.js";
import htmlDocx from "html-docx-js/dist/html-docx";
import saveAs from "file-saver";
import { scrollTo } from "vue-scrollto";
// import alert from '@/components/alert'
const router = useRouter();
const { currentUser } = uInfo();
// 是登录还是注册
const cStatus = ref(1);
// 是否展示登录dialog
const isDialogLogin = ref(false);

// 判断是否为登录状态
const home = useHome();

// 登录数据
const loginData = reactive({
  schoolname: "河池学院",
  account: "",
  password: "",
  uid: currentUser.uid,
});
// 注册确认密码
const password2 = ref("");

const loginStatus = ref(false);

// 登录后的数据
const loginList = ref({
  account: "登录",
});

// 社团成员提交数据
const memberList = reactive({
  mname: "",
  msex: "",
  mphone: "",
  mschoolname: "",
  mpost: "学生",
  miaosu: "",
  uid: currentUser.uid,
});

// 原始数据
const stageData = reactive({
  // 社团简介
  introduction: {
    logo: "https://ts4.cn.mm.bing.net/th?id=OIP-C.JpExcS-YgMJN3bDnQBuJ-gHaHZ&",
    name: "我的社团",
    content: `xxx学生社团成立于xxxx年，是由一群热爱xxx领域的学生自发组成的。我们的宗旨是为了推广xxx，提高大家的专业技能和实践能力，并且促进学生之间的交流和友谊。
    目前，社团成员近100人，分为数个部门，包括xxx部、xxx部、xxx部、xxx部等，每个部门都有专业的负责人和优秀的成员，大家在各自的部门中展现了出色的才能。
    在过去的几年中，我们举办了数十次活动，包括讲座、研讨会、比赛等，得到了广大学生的支持和赞誉。我们的成员不仅在校内表现优异，在校外也经常参加各种活动和比赛，获得了多个奖项和荣誉。`,
  },
  // 社团活动
  acitivity: [
    {
      title: "社团活动1",
      starttime: "2023年3月6日",
      imgs: [
        "https://img0.baidu.com/it/u=798537259,720837485&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
        "https://img0.baidu.com/it/u=316831900,1097281149&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
        "https://img1.baidu.com/it/u=3637604057,4114496013&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
        "https://img0.baidu.com/it/u=1508421888,2686542123&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
      ],
      miaosu:
        "在这个活动中，来自不同国家和文化背景的学生们将聚集在一起，分享彼此的文化和经验。活动将包括表演、展览和互动游戏等多个环节，让参与者更好地了解世界各地的文化和人民。",
    },
    {
      title: "社团活动2",
      starttime: "2023年3月15日",
      imgs: [
        "https://img1.baidu.com/it/u=1054939949,885193306&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
        "https://img1.baidu.com/it/u=2132352919,3035046540&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
      ],
      miaosu:
        "这个活动将组织学生志愿者前往当地的慈善机构或社区服务中心，为当地需要帮助的人们提供志愿服务。志愿者们将参与各种活动，如为老年人提供陪伴、为儿童教授知识、为流浪动物提供关爱等，帮助他们获得更好的生活。",
    },
    {
      title: "社团活动3",
      starttime: "2023年4月9日",
      imgs: [
        "https://img0.baidu.com/it/u=2743401705,1176832226&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400",
      ],
      miaosu:
        "这个活动将组织学生参加各种体育比赛，如篮球、足球、乒乓球等，促进学生身体健康、锻炼身体素质和培养团队合作精神。比赛将按年级或专业组别分组，为学生提供一个展示个人和团队实力的舞台。",
    },
  ],
  activityList: [
    {
      starttime: "【10月1日】",
      title: "“运动会倒计时，我们社团邀你一起助威！”",
    },
    {
      starttime: "【11月5日】",
      title: "“环保行动，我们的社团义务参与！”",
    },
    {
      starttime: "【9月20日】",
      title: "“社团成员走进福利院，与老人们共庆中秋佳节！”",
    },
    {
      starttime: "【12月12日】",
      title: "“艺术节大放异彩，我们社团荣获最佳创意奖！”",
    },
  ],
  htmlDom: "",
  yixiang: [
    {
      dname: "组织部",
    },
    {
      dname: "宣传部",
    },
  ],
});

const section2 = ref();
const section3 = ref();
const section4 = ref();
const section5 = ref();
const section6 = ref();

function loginTab() {
  cStatus.value = 2;
}
function registerTab() {
  cStatus.value = 1;
}
function onLogin() {
  isDialogLogin.value = true;
}

// 登录
function onDenglu() {
  zhuyeLogin(loginData).then((res) => {
    loginList.value = res.data[0];
    loginStatus.value = true;
    // setStageList(res.data[0]);
    console.log(res.data[0]);
    home.stageList = res.data[0];
    isDialogLogin.value = false;
    zhuyeData({ uid: loginData.uid }).then((res) => {
      stageData.introduction.name = res.data[0].corporatename;
      stageData.introduction.content = res.data[0].introduce;
    });
    zhuyeData1({ uid: loginData.uid }).then((res) => {
      stageData.activityList = res.data;
    });
    zhuyeData2({ uid: loginData.uid }).then((res) => {
      stageData.htmlDom = res.data[0].text;
    });
    zhuyeData3({ uid: loginData.uid }).then((res) => {
      stageData.yixiang = res.data;
    });
  });
}

function onSubmitJoin() {
  if (loginStatus.value) {
    console.log(memberList);
    addMember(memberList).then((res) => {
      // console.log(res.data);
      if (res.data.msg == 200) {
        ElMessage({
          message: "添加成功",
          type: "success",
        });
      }
    });
  } else {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: "请先登录",
    });
    isDialogLogin.value = true;
  }
}

function onDownLoad() {
  if (stageData.htmlDom !== "") {
    const page = stageData.htmlDom;
    var converted = htmlDocx.asBlob(page);
    saveAs(converted, `${stageData.introduction.name}.docx`);
    const date = new Date();
    console.log(date.getMonth() + 1);
    const { uid } = loginList.value;
    updateDownloads({
      uid,
      year: date.getFullYear(),
      month: date.getMonth() + 1,
    }).then((res) => {
      console.log(res);
      
    });
  } else {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: "请先登录",
    });
    isDialogLogin.value = true;
  }
}

onMounted(() => {
  // console.log(setIsLogin);
});

// 注册
function onZhuce() {
  if (password2.value == loginData.password) {
    zhuyeResgiter(loginData).then((res) => {
      if (res.data.msg == 200) {
        ElMessage({
          message: "注册成功",
          type: "success",
        });
        cStatus.value = 1;
      }
    });
  } else {
    console.log("注册失败");
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: "<strong>密码不一致</strong>",
    });
  }
}
// 指定位置跳转

const scrollToSection = (sectionRef) => {
  console.log(sectionRef);
  console.log(import.meta.env.VITE_APP_BASE_URL);
  if (sectionRef == "section2") {
    section2.value.scrollIntoView({ behavior: "smooth" });
  }
  if (sectionRef == "section3") {
    section3.value.scrollIntoView({ behavior: "smooth" });
  }
  if (sectionRef == "section4") {
    section4.value.scrollIntoView({ behavior: "smooth" });
  }
  if (sectionRef == "section5") {
    section5.value.scrollIntoView({ behavior: "smooth" });
  }
  if (sectionRef == "section6") {
    section6.value.scrollIntoView({ behavior: "smooth" });
  }
};
</script>
